<template>
	<view class="root wh100">
		<image class="posterImg wh100" :src="posterUrl"></image>
		<view @click="state=!state" class="box wh100 poRel">
			<image class="wh100" :src="imageUrl"></image>
			<image src="../../../static/bofang.png" class="poAbs"
				style="z-index: 1;width: 100rpx;height: 100rpx;top: 35%;left: 43%;"></image>
		</view>
		<video :id="videoId" style="width: 0rpx;height: 0rpx;" @pause="state=0" 
			@timeupdate="timeupdate" @fullscreenchange="fullscreenchange" class="video wh100" :src="url"></video>
	</view>
</template>

<script>
	export default {
		computed:{
			posterUrl(){
				if(this.poster) return this.poster
				return this.url + '?x-oss-process=video/snapshot,t_'+(parseInt(this.currentTime*1000))+',f_jpg,w_800,m_fast'
			}
		},
		created() {
			this.videoId = Date.now() + Math.ceil(Math.random()*10000000)+"";
		},
		mounted() {
			this.VideoContext = uni.createVideoContext(this.videoId)
		},
		methods:{
			fullscreenchange(e){
				console.log(e.detail.fullScreen);
				this.state = e.detail.fullScreen
			},
			timeupdate(e){
				console.log(e.detail);
				this.duration = e.detail.duration
				this.currentTime = e.detail.currentTime
			}
		},
		watch: {
			state(state, oldValue) {
				console.log(state,'state');
				if(!state){
					this.VideoContext.pause()
				}else{
					this.VideoContext.play()
					this.$nextTick(()=>{
						this.VideoContext.play()
						this.VideoContext.requestFullScreen({direction:this.direction})
					})
				}
			}
		},
		data() {
			return {
				VideoContext:{},
				state:false,
				currentTime:0,
				duration:0,
				videoId:'',
				width: 0,
				height: 0
			};
		},
		props: {
			poster: {
				type: [String,Boolean],
				default(){
					return ''
				}
			},
			imageUrl: {
				type: String,
				default(){
					return ''
				}
			},
			url: {
				type: String,
				default(){
					return ''
				}
			},
			direction: {
				type: Number,
				default(){
					return 0
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
.root{
	position:relative;
	overflow: hidden;
}
.posterImg,.video,.box{
	display: flex;
	position:absolute;
}
.posterImg{
	//border: solid red 1px;
}
.box{
	justify-content: center;
	align-items: center;
}
</style>
